<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="demo.css" />
		<script type="text/javascript" src="tool.js"></script>
		<script type="text/javascript" src="base.js"></script>
	</head>
	<body>
		
	<div id="box">box</div>
	<br />
	<input type="button" id="button" value="动画按钮" />
	<input type="button" id="button1" value="复原" /><br />
	<h2>运动数据区域</h2>
	<div id="aaa"></div>
	</body>
	
	<script>
		/*
$(function () {
	
	var box = document.getElementById('box');
	
	
	setInterval(function () {
		box.style.left = getStyle(box, 'left') + 1 + 'px'
	}, 50);

	
	//alert(getStyle(box, 'left'));
	//box.style.left = 500 + 'px';
	
});
*/


//alert(Math.ceil(5.1));

$(function () {
	$('#button').click(function () {
		
		$('#box').animate({
			'attr' : 'x',
		//	't' :  8,
		//	'start' : 50,
			'alter' : 400,   //目标量
			//'target' : 5,   //增量（已经有alter 的话target会忽略）
			'step' : 7
		});
	});
});

//复原
$(function(){
	
	$('#button1').click(function(){
		document.getElementById('aaa').innerHTML=null;//清空测试区域数据
		console.log($('#box').elements[0].style.left);
		$('#box').elements[0].style.left ='250px';//复原
	
	});
	
});

		
	</script>
</html>
